<template>
  <div class="data__view">
    <div class="left">
      <div class="left__card1">
        <section>
          <div>较上日 + {{ store.chinaAdd.localConfirmH5 }}</div>
          <div>{{ store.chinaTotal.localConfirm }}</div>
          <div>本土现有确诊</div>
        </section>
        <section>
            <div>较上日 + {{ store.chinaAdd.nowConfirm }}</div>
            <div>{{ store.chinaTotal.nowConfirm }}</div>
            <div>现有确诊</div>
        </section>
        <section>
            <div>较上日 + {{ store.chinaAdd.confirm }}</div>
            <div>{{ store.chinaTotal.confirm }}</div>
            <div>累计确诊</div>
        </section>
        <section>
            <div>较上日 + {{ store.chinaAdd.noInfect }}</div>
            <div>{{ store.chinaTotal.noInfect }}</div>
            <div>无症状感染者</div>
        </section>
        <section>
            <div>较上日 + {{ store.chinaAdd.importedCase }}</div>
            <div>{{ store.chinaTotal.importedCase }}</div>
            <div>境外输入</div>
        </section>
        <section>
            <div>较上日 + {{ store.chinaAdd.dead }}</div>
            <div>{{ store.chinaTotal.dead }}</div>
            <div>累计死亡</div>
        </section>
      </div>
      <div class="left__pie"></div>
      <div class="left__line"></div>




    </div>
    <div id="china" class="center">
    </div>
    <div class="right">
      <table class="table" cellspacing="0" border="1">
        <thead>
          <tr>
            <th>地区</th>
            <th>新增确诊</th>
            <th>累计确诊</th>
            <th>治愈</th>
            <th>死亡</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in store.item" :key="index">
            <td>{{ item.name }}</td>
            <td>{{ item.today.confirm }}</td>
            <td>{{ item.total.confirm }}</td>
            <td>{{ item.total.heal }}</td>
            <td>{{ item.total.dead }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useStore } from './stores/counter'

import * as echarts from 'echarts'
import { onMounted } from '@vue/runtime-core'
import './assets/china'
import { setMapOption } from './ts/chinaMap'
import { geoCoordMap } from './ts/geoMap'


const store = useStore()


onMounted(async () => {
await store.getList()

  initChinaMap()
  initPie()
  initLine()
})

const initChinaMap = async () => {
  
  const city = store.list.diseaseh5Shelf.areaTree[0].children
  const data = city.map(v => {
    return {
      name: v.name,
      value: geoCoordMap[v.name].concat(v.total.nowConfirm.toString()),
      children: v.children
    }
  })
  const charts = echarts.init(document.getElementById('china') as HTMLElement)

  charts.on('click', (e: any) => {
    console.log(e);
    store.item = e.data.children
  })

  charts.setOption(setMapOption(data))
}

const initPie  =async ()=>{
  const charts = echarts.init(document.querySelector('.left__pie') as HTMLElement)
const  option = {
  backgroundColor:'#223651',
 
  tooltip: {
    trigger: 'item'
  },
  
  series: [
    {
      type: 'pie',
      radius: '50%',
      data: store.cityDetail.map(v=>{
        return{
          name:v.city,
          value:v.local_confirm_add
        }
      }),
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};
charts.setOption(option)
}

const initLine =()=>{
    const charts = echarts.init(document.querySelector('.left__line') as HTMLElement)
    const option = {
       backgroundColor:'#223651',
 
  xAxis: {
    type: 'category',
    data: store.cityDetail.map(v=>v.city),
    axisLine:{
      lineStyle:{
        color:'#fff'
      }
    }
    
  },
  yAxis: {
    type: 'value',
    axisLine:{
      lineStyle:{
        color:'#fff'
      }
    }
  },
  label:{
    show:true
  },
  tooltip:{
    trigger:'axis'
  },
  series: [
    {
      data:store.cityDetail.map(v=>v.local_confirm_add),
      type: 'line',
      smooth: true
    }
  ]
};
    charts.setOption(option)
}
</script>

<style lang="less">
* {
  padding: 0;
  margin: 0;
}
@itemcolor:#41bedb;@itemBg: #223651;
@itemBorder:#212028;

html,
body,
#app {
  height: 100%;
  overflow: hidden;
}

.data__view {
  height: 100%;
  display: flex;
  overflow: hidden;

  .left {
    width: 350px;
    display: flex;
    flex-direction: column;
    .left__card1{
      display: grid;
      grid-template-columns: auto auto auto;
      grid-template-rows: auto auto;
      color: white;
      font-size: 12px;
      white-space: nowrap;
      section{
        background-color: @itemBg;
        border: 1px solid @itemBorder;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px;
        div:nth-child(2){
          color:@itemcolor;
        }
      }
    }
    .left__pie{
      margin-top: 20px;
      // height: 350px;
      flex: 1;
    }
    .left__line{
      margin-top: 20px;
      height: 300px;
    }
  }

  .center {
    flex: 1;
  }

  .right {
    padding: 15px;
    width: 350px;

    .table {
      width: 100%;

      tr {
        th {
          padding: 3px;
          white-space: nowrap;
        }

        td {
          padding: 3px;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>